<template>
    <div class="manage_container">
        <div class="top_card">
            <div class="top_card_name">等级会员</div>
            <el-switch
                v-model="state.switch"
                :active-value="1"
                :inactive-value="2"
                :before-change="onBeforeChange"
                v-auth="'rank:manage:switch'" />
        </div>
        <div class="desc">开启后，系统将应用等级规则计算会员等级，小程序端将展示会员入口。</div>
        <el-button type="primary" v-auth="'rank_manage_add'" @click="toRankAdd">添加等级</el-button>
        <div class="table_card">
            <el-table :data="state.list" stripe>
                <el-table-column label="会员等级" prop="memberLevel"></el-table-column>
                <el-table-column label="会员名称" prop="memberLevelName"></el-table-column>
                <el-table-column label="升级条件" prop="memberUplevelCondition">
                    <template #default="{ row }">
                        <div>
                            {{ row.memberUplevelCondition ? `${row.memberUplevelCondition}成长值` : '无门槛' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="会员权益" prop="priorityIcon">
                    <template #default="{ row }">
                        <template v-if="row.memberPriorityList.length > 0">
                            <div v-for="item in row.memberPriorityList" :key="item.priorityId">
                                {{ item.priorityInnerName }}
                            </div>
                        </template>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column label="升级礼包" prop="priorityBrief">
                    <template #default="{ row }">
                        <div v-if="row.memberUplevelGift.bonusPointsPoint">
                            {{ floatDivide(row.memberUplevelGift.bonusPointsPoint, 100) }}积分
                        </div>
                        <div v-else>-</div>
                    </template>
                </el-table-column>
                <el-table-column label="会员数" prop="memberNum"></el-table-column>
                <el-table-column label="状态" prop="switch">
                    <template #default="{ row }">
                        <div :class="['status', row.switch == 1 ? 'status_green' : '']">
                            已{{ transformStream(row.switch, 'IS_ENABLED') }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="{ row, $index }">
                        <el-button class="table-btn" size="small" @click="onEdit(row)" v-auth="'rank:manage:edit'">
                            编辑
                        </el-button>
                        <template v-if="$index > 0">
                            <el-button
                                v-if="row.switch === 2 && row.memberUplevelCondition === state.maxFalse"
                                class="table-btn"
                                size="small"
                                @click="onDel(row)"
                                v-auth="'rank:manage:delete'">
                                删除
                            </el-button>
                            <el-button
                                v-if="row.switch === 2 && row.memberUplevelCondition === state.minFalse"
                                class="table-btn"
                                size="small"
                                v-auth="'rank:manage:enable'"
                                @click="onStatus(row, $index)">
                                启用
                            </el-button>
                            <el-button
                                v-if="row.switch === 1 && row.memberUplevelCondition === state.maxTrue"
                                class="table-btn"
                                size="small"
                                @click="onStatus(row)"
                                v-auth="'rank:manage:stop'">
                                停用
                            </el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="dialog_box">
            <el-dialog v-model="state.dialogShow" title="提示" width="30%">
                <div class="dialog_content">
                    <div class="dialog_content_title">
                        <el-icon class="dialog_icon"><WarningFilled /></el-icon>
                        <div>{{ state.title }}</div>
                    </div>
                    <div class="dialog_content_desc">
                        {{ state.content }}
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="state.dialogShow = false">取消</el-button>
                        <el-button type="primary" @click="onCofirm">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { floatDivide } from '@/commons/utils';
import { Picture as IconPicture, WarningFilled } from '@element-plus/icons-vue';
import { onMounted, reactive } from 'vue';
import request from '@/request';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const state = reactive({
    list: [],
    row: {}, // 当前选中行数据
    type: '',
    switch: 2, // 会员开关
    maxFalse: 0, // 停用会员的最高成长值
    minFalse: 0, // 停用会员的最高成长值
    minTrue: 0,
    maxTrue: 0,
    title: '', // 弹框标题
    content: '', // 弹框描述内容
    dialogShow: false
});
// 登记会员开关
const getSwitch = async () => {
    const { data } = await request('getDetailGrowthRules', { appType: 1 });
    if (data.switch) {
        state.switch = data.switch;
    }
};
const getData = async () => {
    const { data } = await request('getRankListServ');
    state.list = data || [];
    let falseArr = [];
    let trueArr = [];
    state.list.forEach(item => {
        item.switch === 1 ? trueArr.push(item) : falseArr.push(item);
    });
    if (falseArr.length > 0) {
        state.minFalse = falseArr[0].memberUplevelCondition;
        state.maxFalse = falseArr[falseArr.length - 1].memberUplevelCondition;
    }
    if (trueArr.length > 0) {
        state.minTrue = trueArr[0].memberUplevelCondition;
        state.maxTrue = trueArr[trueArr.length - 1].memberUplevelCondition;
    }
};
// 添加等级
const toRankAdd = () => {
    if (state.list.length === 10) {
        ElMessage.warning('最多添加10个会员等级');
    } else {
        router.push({
            path: '/rank/manage/add',
            query: {
                memberLevel: `VIP${state.list.length + 1}`,
                v: state.list[state.list.length - 1]?.memberUplevelCondition
            }
        });
    }
};

const onCofirm = async () => {
    if (state.type === 'switch') {
        await request('setRankSwitchServ', { switch: state.switch === 1 ? 2 : 1 });
        state.switch = state.switch === 1 ? 2 : 1;
        ElMessage.success(`${state.switch === 1 ? '开启' : '关闭'}成功`);
    } else if (state.type === 'del') {
        await request('delRankServ', { id: state.row.id });
        ElMessage.success('删除成功');
        getData();
    } else {
        const res = await request('changeRankServ', { id: state.row.id, switch: state.row.switch === 1 ? 2 : 1 });
        ElMessage.success(`${state.row.switch === 1 ? '停用' : '启用'}成功`);
        getData();
    }
    state.dialogShow = false;
};
const onBeforeChange = () => {
    state.type = 'switch';
    if (state.switch === 2) {
        state.title = '确定要开启等级会员吗？';
        state.content =
            '开启等级后，所有会员按照最新配置的规则计算会员等级。小程序端个人中心将展示对应会员等级和会员入口。';
    } else {
        state.title = '确定要关闭等级会员吗？';
        state.content =
            '关闭等级会员后，所有会员将不再享受会员权益。小程序端个人中心将不再展示对应会员等级和会员入口。';
    }
    state.dialogShow = true;
    return new Promise((_, reject) => {
        return reject(false);
    });
};
// 编辑
const onEdit = row => {
    router.push({ path: '/rank/manage/edit', query: { id: row.id } });
};
// 删除
const onDel = row => {
    state.type = 'del';
    state.row = row;
    state.title = `确定要删除${row.memberLevel}等级吗？`;
    state.content = '';
    state.dialogShow = true;
};
// 启用停用
const onStatus = (row, index) => {
    state.row = row;
    state.type = row.switch === 1 ? 'end' : 'begin';
    if (row.switch === 1) {
        state.title = `确定要停用${row.memberLevel}等级吗？`;
        // memberLevel
        state.content = `停用${row.memberLevel}等级后，原${row.memberLevel}等级的会员将会降级，请谨慎操作，避免引起客诉。`;
    } else {
        state.title = `确定要启用${row.memberLevel}等级吗？`;
        state.content = `启用${row.memberLevel}等级后，会员等级将重新计算，原VIP${index}等级的会员可能会发生等级变动。`;
    }
    state.dialogShow = true;
};

onMounted(() => {
    getSwitch();
    getData();
});
</script>

<style lang="scss" src="./index.scss" scoped></style>
